<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表过滤</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>人员列表（遍历数组）</h2>
            <input type="text" placeholder="请输入名字进行过滤" v-model="keyWord">
            <ul>
                <li v-for="(p, index) of filterPersons" :key="index">
                    {{p.name}}: {{p.age}}： {{p.sex}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 方法一：使用watch实现列表过滤
            // 创建Vue实例，开端
            /* new Vue({
                el: '#root',
                data: {
                    keyWord: '',
                    persons: [
                        {name: "周冬雨", age: 18, sex: '女'},
                        {name: "马冬梅", age: 18, sex: '女'},
                        {name: "周杰伦", age: 18, sex: '男'},
                        {name: "温兆伦", age: 18, sex: '男'}
                    ],
                    filterPersons: []
                },
                watch: {
                    keyWord: {
                        immediate: true,    // 立即执行一次，要不然初始页面中没有人员信息
                        handler(val){
                            this.filterPersons = this.persons.filter((p)=>{
                                return p.name.indexOf(val) != -1
                            })
                        }
                    }
                }
            })*/ 

            // 方法二：使用计算属性实现列表过滤
            new Vue({
                el: '#root',
                data: {
                    keyWord: '',
                    persons: [
                        {name: "周冬雨", age: 18, sex: '女'},
                        {name: "马冬梅", age: 18, sex: '女'},
                        {name: "周杰伦", age: 18, sex: '男'},
                        {name: "温兆伦", age: 18, sex: '男'}
                    ]
                },
                computed: {
                    filterPersons: function() {
                        return this.persons.filter((p)=>{
                            console.log(this)
                                return p.name.indexOf(this.keyWord) != -1
                            })
                    }
                }
            })
        </script>
    </body>
</html>
